<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .da{
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            top: 150px;
            left: 0;
            margin: auto;
        }
        li{
            list-style: none;
            
        }
        ul{
            display: flex;
            position: absolute;
            transition: 0.5s ease;
            
        }
        .da ul li img{
            width: 400px;
            height: 400px;
            
        }
        span{
            display: none;
            position: absolute;
            top: 50%;
            font-size: 40px !important;
            margin-top: -20px;
        }
        .l{
            left: 10px ;
        }
        .r{
            right: 10px;
        }
        ol{
            position: absolute;
            left: 50%;
            bottom: 30px;
            margin-left: -50px; ;
            display: flex;
            
        }
        ol li{
            width: 10px;
            height: 10px;
            background-color: #fff;
            margin-left: 10px;
            border-radius: 50%;
            transition: 0.5s ease;
        }
    </style>
</head>
<body>
    <div class="da">
        <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.jpg"></li>
            <li><img src="./images/5.jpg"></li>
        </ul>
        <span class="iconfont icon-xiangzuojiantou l"></span>
        <span class="iconfont icon-xiangyoujiantou r"></span>
        <ol>
            <li style="background-color: red;"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>
<script>
    var yan=document.querySelector('.r')
    var zan=document.querySelector('.l')
    var ul=document.querySelector('ul')
    var da=document.querySelector('.da')
    var imgs=document.querySelectorAll('ul img')
    var lis=document.querySelectorAll('ol li')
    var num=0
    yan.onclick=function(){
        num++
        if(num>imgs.length-1){
            num=0
        }
        ul.style.left=-num*400+'px'
        bs(num)
    }
    zan.onclick=function(){
        num--
        if(num<0){
            num= imgs.length-1
        }
        ul.style.left=-num*400+'px'
        bs(num)
    }
    da.onmouseenter=function(){
        yan.style.display='block'
        zan.style.display='block'
        clearInterval(dsq)
    }
    da.onmouseleave=function(){
        yan.style.display='none'
        zan.style.display='none'
        lb()
    }
    function lb(){
        dsq=setInterval(function(){
            yan.onclick()
        },2000)
    }
    lb()
    for(i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i)
        lis[i].onclick=function(){
            var index=this.getAttribute('index')
            num=index
            ul.style.left=-num*400+'px'
            bs(num)
        }
    }
    function bs(index){
        for(i=0;i<lis.length;i++){
            lis[i].style.backgroundColor= '#fff'
        }
        lis[index].style.backgroundColor= 'red'
    }
</script>